<template>
  <div class="baseInfo-wrap">
    <div class="baseInfo-wrap-content">
      <info />
      <div class="baseInfo-menu">
        <span :class="{'menu-active':showFlag == 0}" @click="showHandle(0)">个人信息</span>
        <span :class="{'menu-active':showFlag == 1}" @click="showHandle(1)">账户安全</span>
      </div>
      <div class="set-wrap">
        <infoSet v-if="!showFlag" />
        <safe v-else />
      </div>
    </div>
  </div>
</template>

<script>
import info from "./components/info";
import infoSet from "./components/infoSet";
import safe from "./components/safe";
// import { mapGetters } from "vuex";
// import { getUserInfo } from "@/api/accountSettings";
export default {
  components: {
    info,
    infoSet,
    safe,
  },
  computed: {
    // ...mapGetters(["storeInfo", "memberInfo"])
  },
  mounted() {
    // console.log("用户信息", this.memberInfo);
    // this.$store.dispatch("user/getStoreInfo");
  },
  data() {
    return {
      showFlag: 0,
      userInfo: {},
    };
  },
  methods: {
    showHandle(flag) {
      this.showFlag = flag;
    },
    // // 获取用户信息
    // _getUserInfo() {
    //   getUserInfo().then(res => {
    //     this.userInfo = res.data;
    //     console.log("账户信息", this.userInfo);
    //   });
    // }
  },
};
</script>

<style lang='scss' scoped>
.baseInfo-wrap {
  padding: 20px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  .baseInfo-wrap-content{
    min-width: 1400px;
  }
  .baseInfo-menu {
    background: #fff;
    margin-top: 20px;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #ebf0f2;
    span {
      color: #999999;
      display: inline-block;
      height: 100%;
      margin-left: 30px;
      cursor: pointer;
      &.menu-active {
        color: #333;
        border-bottom: 2px solid #333;
      }
    }
  }
  .set-wrap {
    width: 100%;
    background: #fff;
    margin-bottom: 100px;
    overflow: auto;
  }
}
</style>